    <template>
    <div class="popProjectFilling-box">
        <el-dialog
            title="选择服务参与活动"
            :visible.sync="popProjectFilling_Show"
            width="800px"
            top="6vh"
            >
                <div class="popProjectFilling-div" v-if="isShowGoods">
                    <div class="cascader-div">
                        <el-cascader
                            v-model="searchform.catid"
                            :options="cat_ls"
                            class="sele-w"
                            :props="propsdata"
                            @change="changeList"
                        ></el-cascader>
                    </div>
                    <div class="list-item" v-for="(item,index) in goods_ls" :key="index" @click="selectFun(item)">
                        <div class="list-img">
                            <img :src="item.imgs||'https://cdn.imiyun.com/static/yd/imgs/g-default.png'" alt="">
                        </div>
                        <div class="lsit-div">
                            <p>{{item.title}}</p>
                            <p class="phone">{{item.txt_title}}</p>
                            <p class="mony">{{item.price}}</p>
                        </div>
                    </div>
                </div>
                <div class="list-item-info" v-else>
                    <div class="list-item-info-box">
                        <div class="list-item-info-div">
                            <img :src="selectObj.imgs||'https://cdn.imiyun.com/static/yd/imgs/g-default.png'" alt="">
                        </div>
                        <div class="list-item-info-pric">
                            <p>{{goodsDetail.title}}</p>
                            <p>{{goodsDetail.gd_brand}}</p>
                            <p class="price">{{ goodsDetail.price }}</p>
                        </div>
                    </div>
                    <div class="infoSetBox">
                        <div class="infoSetDiv">
                            <div>
                                <el-select v-model="psort" @change="psortChange" placeholder="请选择" size="mini" style="width: 100px;">
                                    <el-option
                                    v-for="item in gd_price"
                                    :key="item.psort"
                                    :label="item.title"
                                    :value="item.psort">
                                    </el-option>
                                </el-select>
                                <el-input-number style="margin: 0 10px" v-model="priceNum" size="mini"  :min="1"  label="描述文字"></el-input-number>
                                <span>{{goodsDetail.unit_title}}</span>
                            </div>
                            <div>
                                <span>折扣</span>
                                <el-input-number style="margin: 0 10px" v-model="discountNum" size="mini" @change="handleChange"  label="描述文字"></el-input-number>
                                <span>%</span>
                            </div>    
                        </div>
                        <div class="infoSetDiv">
                            <div>
                                <span>数量</span>
                                <el-input-number style="margin: 0 10px" v-model="numberNum" size="mini" @change="handleChange"  label="描述文字"></el-input-number>
                                <span>{{goodsDetail.unit_title}}</span>
                            </div>
                            <div v-if="goodsDetail.outday_i">
                                <span style="margin-right: 10px;">有效期</span>
                                <el-select v-model="goodsDetail.outday_i" placeholder="请选择" size="mini" style="width: 100px;">
                                    <el-option
                                    v-for="item in goodsDetail.outday_ls"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                            </div>
                        </div>
                        <div class="infoSetDiv">
                            <div>
                                <el-select v-model="goodsDetail.cost_i" placeholder="请选择" @change="costChange" size="mini" style="width: 100px;">
                                    <el-option
                                    v-for="item in goodsDetail.cost_ls"
                                    :key="item.id"
                                    :label="item.title"
                                    :value="item.id">
                                    </el-option>
                                </el-select>
                                <el-input-number style="margin: 0 10px" v-model="num" size="mini" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
                                <span>{{goodsDetail.unit_title}}</span>
                            </div>
                            <div class="infoSetInte">
                                <span style="margin-right: 10px;">备注</span>
                                <el-input
                                    type="textarea"
                                    size="mini"
                                    :rows="2"
                                    maxlength="200"
                                    placeholder="请输入备注信息（200字内）"
                                    v-model="textarea">
                                </el-input>
                            </div>    
                        </div>
                    </div>
                </div>
                <span slot="footer" class="dialog-footer" v-if="!isShowGoods">
                    <el-button @click="BackFun">取 消</el-button>
                    <el-button type="primary" @click="affirmFun">确 定</el-button>
                </span>
        </el-dialog>
    </div>
</template>

<script>
import config from "@/js/conf/Config.js";

export default {
    data () {
        return {
            searchform: {
                catid: "",
            },
            cat_ls: [],
            popProjectFilling_Show: false,
            propsdata: {
                children: "ls",
                label: "title",
                value: "id",
                expandTrigger: "hover",
                checkStrictly: true,
            },
            goods_ls: [],
			num: "",
			input: "",
            isShowGoods: true,
            gd_price: [],
            psort: "1",

            value: "1",
            textarea: "",
        
            goodsDetail: {}, // 服务信息
            goodsArr: [],
            price_ls: [],
            priceNum: 1, // 价格
            discountNum: 100, // 折扣
            numberNum: 1, // 数量

        }
    },
    methods: {
        initInfoSetData () {
            this.priceNum = 1;
            this.goodsDetail = {}; 
            this.isShowGoods = true;
        },
        psortChange (item) { // 选择售价
            this.price_ls.forEach (row=> {
                if (row.price_i == item) {
                    this.priceNum = Number(row.price);
                }
            })
        },
        costChange () {

        },
        affirmFun () { // 确认服务
            let filterArr = this.goodsArr.filter ( item=> {
                if (this.goodsDetail.id == item.id){
                    return item
                }
            })
            if (!filterArr.length) return false
            console.log(filterArr)

            return
            this.goodsArr.push(this.goodsDetail);

        },
        BackFun () { // 返回上一页
            this.initInfoSetData()
        },
        async order_gd_price () {
            let url = config.YY_ORDER_GD_PRICE;
            let param = {
                cpid: this.selectObj.cpid,
                gdid: this.selectObj.id,
                type_od: "",
                customerid: "",
            };
            let res = await this.$api({url: url, data: param});
            console.log(res);
            if (res.status == 1) {
                this.gd_price = res.data.gd_price;
                this.price_ls = res.data.price_ls;
                this.psortChange(1)
            }
        },
        async goodsinfo_goods_detail () { // 获取产品信息
            let url = config.YY_GOODSINFO_GOODS_DETAIL;
            let param = {
                cpid: this.selectObj.cpid,
                gdid: this.selectObj.id,
            };
            let res = await this.$api({url: url, data: param});
            this.goodsDetail = res.data.gd_info; // 获取产品信息
            this.goodsDetail.cost_ls = this.goodsDetail.cost_ls.filter( item=> {
                if (item.status == 1) return item
            })
        },
        async cat_ls_ajax () {
            let url = config.PROPRE_CAT_LS;
            let param = {};
            let res = await this.$api({ url: url, data: param });
            this.cat_ls = res.data.catlist
        },
        async goods_list () {
            let url = config.YY_GOODSINFO_GOODS_LIST;
            let param = {};
            let res = await this.$api({url:url,data:param})
            console.log(res.data.goods_ls,'goods_listgoods_listgoods_list')
            this.goods_ls.push(...res.data.goods_ls)
        },
        selectFun (item) {
            this.isShowGoods = false;
            this.selectObj = JSON.parse(JSON.stringify(item));
            this.goodsinfo_goods_detail();
            this.order_gd_price();
        }
    },
    created () {
        this.cat_ls_ajax();
        this.goods_list();
    }
}
</script>

<style lang="scss" scoped>
.infoSetBox {
    .infoSetDiv {
        display: flex;
        margin-bottom: 20px;
        > div {
            margin-right: 30px;
            &:nth-child(1) {
                width: 300px;
            }
        }
        .infoSetInte {
            width: 400px;
            display: flex;
            > span {
                flex-shrink: 0;
            }
        }
    }
}
.popProjectFilling-box {
    width: 100%;
    .cascader-div {
        margin-bottom: 10px;
    }
    .list-item {
        width: 100%;
        display: flex;
        margin-bottom: 10px;
        border-bottom: 1px #f2f2f2 solid;
        padding-bottom: 10px;
        cursor: pointer;
        .list-img {
            width: 80px;
            height: 80px;   
            display: block;
            overflow:hidden;
            border-radius: 5px;
            margin-right: 10px;
        }
        .lsit-div {
            width: 70%;
            p{
                height: 24px;
                line-height: 24px;
            }
            .phone {
                color: #9c9a9a;
                overflow:hidden;
                text-overflow:ellipsis;
                white-space:nowrap;
            }
            .mony {
                color: #fa4848;
            }
        }
        img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    }
    .popProjectFilling-div {
        width: 100%;
        height: 58vh;
        overflow: auto;
    }
    .list-item-info {
        .list-item-info-box {
            display: flex;
            margin-bottom: 10px;
            .list-item-info-div {
                img {
                    width: 100px;
                    height: 100px;
                    display: block;
                    border-radius: 6px;
                    margin-right: 10px;
                }
            }
            .list-item-info-pric {
                .price {
                    margin-top: 20px;
                    color: red;
                }
            }   
        }
    }
}
</style>